<template>
    <el-form
        :model="searchParams"
        size="small"
        :rules="rules"
        class="zulinFormClass"
        ref="zulinFormRef"
        label-width="160px"
    >
        <el-row>
            <el-col :span="12">
                <el-form-item label="不动产地址" prop="bdczldz">
                    <el-input
                        style="width:200px;"
                        size="small"
                        maxlength="120"
                        v-model="searchParams.bdczldz"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item
                    label="租赁期起止"
                    prop="zlqqz"
                >
                    <el-date-picker
                        style="width:200px;"
                        range-separator="  "
                        size="small"
                        v-model="searchParams.zlqqz"
                        type="daterange"
                        align="right"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="跨地（市）标志" prop="kdsbz">
                    <el-select
                        size="small"
                        v-model="searchParams.kdsbz"
                        placeholder="请选择"
                        style="width:200px;"

                    >
                        <el-option label="是" value="Y"></el-option>
                        <el-option label="否" value="N"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="产权证书/不动产权证号" prop="cqzsbh">
                    <el-input
                        size="small"
                        maxlength="40"
                        v-model="searchParams.cqzsbh"
                        placeholder="请输入"
                        style="width:200px;"

                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="面积单位" prop="mjdw">
                    <el-select
                        size="small"
                        v-model="searchParams.mjdw"
                        placeholder="请选择"
                        style="width:200px;"
                    >
                    <el-option label="平方米" value="平方米"></el-option>
                        <el-option label="平方千米" value="平方千米"></el-option>
                        <el-option label="公顷" value="公顷"></el-option>
                        <el-option label="亩" value="亩"></el-option>
                        <el-option label="h㎡" value="h㎡"></el-option>
                        <el-option label="k㎡" value="k㎡"></el-option>
                        <el-option label="㎡" value="㎡"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import VXETable from 'vxe-table'
import _ from 'lodash';

export default ({
    props: ['vmsManualTdywDtoList'],
    data() {
        return {
            timer:null,
            searchParams:{
                bdczldz:'',
                zlqqz:'',
                kdsbz:'',
                cqzsbh:'',
                mjdw:'',
            },
            rules:{
                    bdczldz: [
                     {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    zlqqz: [
                      {  required: true, message: '请选择', trigger: 'change' }
                    ],
                    kdsbz: [
                        {  required: true, message: '请选择', trigger: 'change' }
                    ],
                    cqzsbh: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    mjdw: [
                       {  required: true, message: '请选择', trigger: 'change' }
                    ],
                },
        }
    },
    methods:{
        isAddress(){
            let addres  = [
                '街',
                '路',
                '村',
                '乡',
                '镇',
                '道',
                '号',
                '巷',
            ]
          return  addres.some(item=> this.searchParams.bdczldz.includes(item))
            
        },
       async submitValidate() {
          let res = await  this.$refs['zulinFormRef'].validate().catch((err)=>{
                console.log(err);
                return false
            })
            if(this.isAddress() != true){
                return VXETable.modal.message({
                  content: '详细地址必须包含街、路、村、乡、镇、道、巷、号等任意一个关键词！',
                  status: 'error',
              })
            }
            return res;
      },
       getFormValue() {
        let resArr = [
            {
                ...this.searchParams,
                zlqqz: this.searchParams.zlqqz.join(' ')
            }
        ]
        console.log(resArr);
        return [..._.cloneDeep(resArr)]
      },
    },
    created(){
        this.timer = setTimeout(()=>{
            clearTimeout(this.timer);
            this.timer = null;
        },1000)
        if(this.vmsManualTdywDtoList[0]){
            this.searchParams = this.vmsManualTdywDtoList[0];
            this.searchParams.zlqqz = this.vmsManualTdywDtoList[0].zlqqz.split(' ');
        }

    },
    watch:{
        'searchParams.mjdw'(newV){
            if(newV){
                if(this.timer)return;
                this.$emit('editMJAndCQZS',{
                    dw: newV
                })
            }
        },
        'searchParams.cqzsbh'(newV){
            if(newV){
                if(this.timer)return;
                this.$emit('editMJAndCQZS',{
                    ggxh: newV
                })
            }
        },
    }
})
</script>

<style lang="scss" scoped>
.zulinFormClass{
    border: 1px solid #bb8c91;
    padding: 18px 6px 0;
    // white-space: initial;
    white-space: normal;
    ::v-deep{
        width: 100%;
    }
}
</style>
